import { onBeforeMount, onMounted } from 'vue';
import { ref, toRefs } from 'vue';
import useComponentConfig from '@/views/design-center/store/component-config';
const useComponentConfigStore = useComponentConfig();
const { checkMoreCompoList } = toRefs(useComponentConfigStore);
const isCtrl = ref(false); // 快捷键 ctrl 是否被按下
export const useCheckMore = () => {
  // 监听键盘
  const keyDown = () => {
    // 键盘按下事件
    document.onkeydown = (e) => {
      // 取消默认事件
      // e.preventDefault();
      //事件对象兼容
      let e1 =
        e || event || window.event || arguments.callee.caller.arguments[0];

      if (e1.keyCode === 17) {
        isCtrl.value = true; // 如果ctrl按下就让他按下的标识符变为true
        console.log(
          '监听键盘事件进来没-------键盘按下事件--------',
          isCtrl.value
        );
      }
    };
    // 键盘抬起事件
    document.onkeyup = (e) => {
      // 取消默认事件
      // e.preventDefault();
      //事件对象兼容
      let e1 =
        e || event || window.event || arguments.callee.caller.arguments[0];
      if (e.keyCode) {
        isCtrl.value = false; // 如果ctrl抬起下就让他按下的标识符变为false
        console.log('监听键盘事件进来没-------键盘抬起事件--------');
      }
    };
  };

  /**
   * @description:按住ctrl 进行多选
   * @param {*} item
   * @param {*} index
   * @return {*}
   */
  const handleCtrlMore = (item, index) => {
    console.log(item, '--------------------', isCtrl.value);
    if (isCtrl.value) {
      // 如果按下的是ctrl
      let i = checkMoreCompoList.value.findIndex((el) => el.id === item.id); // 判断选中列表中是否包含这个点击的div
      console.log(i, 55555555);

      if (i < 0) {
        checkMoreCompoList.value.push({
          ...item.styles,
          id: item.id
        }); // 不包含就加进去
      } else {
        checkMoreCompoList.value.splice(i, 1); // 包含就删，
      }
    }
  };

  onMounted(() => {
    keyDown();
  });
  return {
    isCtrl,
    handleCtrlMore
  };
};
